<template>
  <div class="signin">
    <header>
      <div class="top">
        <img src="@/assets/img/signin/left.png" @click="goback" />
        <span>签到</span>
      </div>
      <div class="mid">
        <span>每日签到 - </span>
        <span class="two">领租金抵用卷</span>
      </div>
      <div class="bot">
        <span>连续签到 - </span>
        <span class="two">免费拿福利</span>
      </div>
    </header>
    <div class="banner">
      <main>
        <div class="top">
          <div class="ttt">
            <div class="left">
              <span>签到提醒 </span>
              <van-switch
                v-model="checked"
                size="12px"
                inactive-color="#9F9F9F"
              />
            </div>
            <div class="right">
              <span>规则说明 </span>
              <img class="rr" src="@/assets/img/signin/right.png" />
            </div>
          </div>
        </div>
        <div class="mid">
          <img
            src="@/assets/img/signin/hb.png"
            :index="1"
            @click="signin($event)"
          />
          <div class="heng"></div>
          <img
            src="@/assets/img/signin/hb.png"
            :index="2"
            @click="signin($event)"
          />
          <div class="heng"></div>
          <img
            src="@/assets/img/signin/hb.png"
            :index="3"
            @click="signin($event)"
          />
          <div class="heng"></div>
          <img
            src="@/assets/img/signin/hb.png"
            :index="4"
            @click="signin($event)"
          />
          <div class="heng"></div>
          <img
            src="@/assets/img/signin/hb.png"
            :index="5"
            @click="signin($event)"
          />
          <div class="heng"></div>
          <img
            src="@/assets/img/signin/hb.png"
            :index="6"
            @click="signin($event)"
          />
          <div class="heng"></div>
          <img
            src="@/assets/img/signin/hb.png"
            :index="7"
            @click="signin($event)"
          />
        </div>
        <div class="week">
          <span>周 一</span>
          <span>周 二</span>
          <span>周 三</span>
          <span>周 四</span>
          <span>周 五</span>
          <span>周 六</span>
          <span>周 日</span>
        </div>
        <div class="ad">每日签到所得抵用卷金额累计，交租可用</div>
        <van-button type="warning" :round="true">签到抵房租</van-button>
      </main>
    </div>

    <div class="inte">
      <img src="@/assets/img/signin/money.png" />
      <div class="center">
        <div class="top">我的积分: {{ point }}</div>
        <div class="bot">每日签到+50积分</div>
      </div>
      <van-button plain type="primary">积分兑换</van-button>
    </div>

    <van-grid :border="false" :column-num="2" gutter="7">
      <van-grid-item>
        <img src="@/assets/img/signin/jifen1.png" />
        <div>
          <p>积分可兑换惊喜好礼</p>
          <van-button
            round
            type="primary"
            plain
            color="#c42b35"
            @click="get($event)"
            >领取</van-button
          >
        </div>
      </van-grid-item>
      <van-grid-item>
        <img src="@/assets/img/signin/jifen100.png" />
        <div>
          <p>签约抵用卷*每天50张</p>
          <van-button round type="primary" plain color="#DEDEDE"
            >领取</van-button
          >
        </div>
      </van-grid-item>
      <van-grid-item>
        <img src="@/assets/img/signin/jifen50.png" />
        <div>
          <p>房租抵用卷*每周10张</p>
          <van-button round type="primary" plain color="#DEDEDE"
            >领取</van-button
          >
        </div>
      </van-grid-item>
      <van-grid-item>
        <img src="@/assets/img/signin/jifen10.png" />
        <div>
          <p>房租抵用卷*每周50张</p>
          <van-button round type="primary" plain color="#DEDEDE"
            >领取</van-button
          >
        </div>
      </van-grid-item>
      <van-grid-item>
        <img src="@/assets/img/signin/jifen5.png" />
        <div>
          <p>房租抵用卷*每周100张</p>
          <van-button round type="primary" plain color="#DEDEDE"
            >领取</van-button
          >
        </div>
      </van-grid-item>
      <van-grid-item>
        <img src="@/assets/img/signin/jifen30.png" />
        <div>
          <p>货拉拉30元优惠卷</p>
          <van-button round type="primary" plain color="#DEDEDE"
            >领取</van-button
          >
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { Toast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const checked = ref(false);
    const router = useRouter();
    const point = ref(0);

    const goback = () => {
      router.push({ path: "/home/mine" });
    };

    const signin = (i) => {
      const d = i.target.getAttribute("index");
      const day = new Date().getDay();

      if (d == day) {
        i.target.src = require("../assets/img/signin/hb2.png");
        point.value = 50;
      } else {
        Toast("请在当前日期签到");
      }
    };

    const get = (el) => {
      el.target.innerText = "已领取";
    };
    return { checked, signin, get, goback, point };
  },
};
</script>

<style lang="less">
.signin {
  header {
    height: 150px;
    background-image: url("../assets/img/signin/bg.png");
    background-size: 100%;
    overflow: hidden;
    padding-top: 10px;
    color: white;
    .top {
      img {
        width: 11px;
        vertical-align: middle;
        margin-left: 14px;
        margin-top: -2px;
      }
      span {
        font-size: 20px;
        color: white;
        vertical-align: middle;
        margin-left: 146px;
      }
    }
    .mid,
    .bot {
      margin-top: 15px;
      font-size: 20px;
      margin-left: 15px;
      .two {
        font-size: 18px;
      }
    }
  }
  .banner {
    height: 240px;
    background: linear-gradient(180deg, #ff874a 0%, #ffa750 100%);
    padding: 0 10px 10px;
    overflow: hidden;
    main {
      background: #fff;
      height: 220px;
      border-radius: 5px;
      font-size: 14px;
      overflow: hidden;
      .top {
        color: #222;
        padding: 15px;
        overflow: hidden;
        .ttt {
          overflow: hidden;
        }
        span {
          vertical-align: middle;
        }
        .van-switch {
          vertical-align: middle;
        }
        .left {
          float: left;
        }
        .right {
          float: right;
          img {
            width: 7px;
            vertical-align: middle;
          }
        }
      }
      .mid {
        overflow: hidden;
        margin: 20px 30px 15px;
        img {
          width: 22px;
          float: left;
        }
        .heng {
          float: left;
          width: 13px;
          height: 1px;
          background: #cbcbcb;
          margin: 11px 5px 0;
        }
      }
      .week {
        margin-left: 10px;
        span {
          margin-left: 18px;
          font-size: 12px;
          color: #1d1d1d;
        }
      }
      .ad {
        font-size: 14px;
        text-align: center;
        margin-top: 25px;
        color: #888888;
      }
      .van-button {
        width: 256px;
        margin-top: 10px;
        background: #fe5e51;
        display: block;
        margin: 10px auto 0;
      }
    }
  }
  .inte {
    width: 355px;
    height: 80px;
    background: #fff;
    border-radius: 10px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    img {
      width: 65px;
      margin-left: 5px;
    }
    .center {
      margin-left: 8px;
      .top {
        font-weight: bold;
        font-size: 18px;
      }
      .bot {
        font-size: 12px;
        margin-top: 6px;
        color: #9c9c9c;
      }
    }
    .van-button {
      margin-left: 80px;
      width: 80px;
      height: 27px;
      border-radius: 5px;
      border-color: #f41d09;
      font-size: 12px;
      color: #f41d09;
    }
  }
  .van-grid {
    margin-bottom: 10px;
  }
  .van-grid-item__content {
    width: 175px;
    padding: 0;
    font-size: 14px;
    img {
      width: 175px;
    }
    div {
      width: 175px;
      height: 77px;
      p {
        margin-top: 7px;
        margin-left: 3px;
      }
      .van-button {
        display: block;
        margin: 14px auto 0;
        width: 83px;
        height: 27px;
        .van-button__content {
          margin-left: -61px;
          height: 27px;
        }
      }
    }
  }
}
</style>
